import 'package:flutter/material.dart';

///
/// 详细页面
///
class TestDetailPage extends StatefulWidget {
  @override
  _TestDetailPageState createState() => _TestDetailPageState();
}

class _TestDetailPageState extends State<TestDetailPage> {
  Widget _showEditField(String label, String value, bool required) {
    return Column(
      children: <Widget>[
        EditInfoField(
          label: label,
          value: value,
          color: Colors.cyan[50],
        ),
        Divider(),
      ],
    );
  }

  Widget _showFieldInfo(String label, String value, bool required) {
    return Column(
      children: <Widget>[
        // Container(
        //   height: 25.0,
        //   decoration: BoxDecoration(color: Colors.cyan[50]),
        //   child: Row(
        //     children: <Widget>[
        //       Column(
        //         children: <Widget>[
        //           Row(
        //             children: <Widget>[
        //               Text("$label"),
        //               Text(
        //                 required ? "*" : " ",
        //                 style: TextStyle(color: Colors.red),
        //               ),
        //               Text(":\t\t"),
        //             ],
        //           ),
        //         ],
        //       ),
        //       Flexible(
        //         fit: FlexFit.tight,
        //         child: Container(
        //           height: 25.0,
        //           padding: EdgeInsets.all(5.0),
        //           decoration: BoxDecoration(color: Colors.transparent),
        //           child: Text(
        //             value,
        //             textAlign: TextAlign.right,
        //             overflow: TextOverflow.ellipsis,
        //           ),
        //         ),
        //       ),
        //     ],
        //   ),
        // ),
        ReadInfoField(
          label: label,
          value: value,
          color: Colors.cyan[50],
        ),
        Divider(),
      ],
    );
  }

  Widget _showTwoFieldInfo(String label1, String value1, bool required1,
      String label2, String value2, bool required2) {
    double halfScreenWidth = (MediaQuery.of(context).size.width - 24) * 0.5;
    return Column(
      children: <Widget>[
        // Container(
        //   height: 25.0,
        //   decoration: BoxDecoration(color: Colors.cyan[50]),
        //   child: Row(
        //     children: <Widget>[
        //       Container(
        //         width: halfScreenWidth,
        //         child: Row(
        //           children: <Widget>[
        //             Column(
        //               children: <Widget>[
        //                 Row(
        //                   children: <Widget>[
        //                     Text("$label1"),
        //                     Text(
        //                       required1 ? "*" : " ",
        //                       style: TextStyle(color: Colors.red),
        //                     ),
        //                     Text(":\t\t"),
        //                   ],
        //                 ),
        //               ],
        //             ),
        //             Flexible(
        //               fit: FlexFit.tight,
        //               child: Container(
        //                 height: 25.0,
        //                 padding: EdgeInsets.all(5.0),
        //                 decoration: BoxDecoration(color: Colors.transparent),
        //                 child: Text(
        //                   value1,
        //                   textAlign: TextAlign.right,
        //                   overflow: TextOverflow.ellipsis,
        //                 ),
        //               ),
        //             ),
        //           ],
        //         ),
        //       ),
        //       SizedBox(width: 16.0),
        //       Container(
        //         width: halfScreenWidth,
        //         child: Row(
        //           children: <Widget>[
        //             Column(
        //               children: <Widget>[
        //                 Row(
        //                   children: <Widget>[
        //                     Text("$label2"),
        //                     Text(
        //                       required2 ? "*" : " ",
        //                       style: TextStyle(color: Colors.red),
        //                     ),
        //                     Text(":\t\t"),
        //                   ],
        //                 ),
        //               ],
        //             ),
        //             Flexible(
        //               fit: FlexFit.tight,
        //               child: Container(
        //                 height: 25.0,
        //                 padding: EdgeInsets.all(5.0),
        //                 decoration: BoxDecoration(color: Colors.transparent),
        //                 child: Text(
        //                   value2,
        //                   textAlign: TextAlign.right,
        //                   overflow: TextOverflow.ellipsis,
        //                 ),
        //               ),
        //             ),
        //           ],
        //         ),
        //       ),
        //     ],
        //   ),
        // ),
        Row(
          children: <Widget>[
            ReadInfoField(
              width: halfScreenWidth,
              label: label1,
              value: value1,
              color: Colors.cyan[50],
            ),
            SizedBox(width: 8.0),
            ReadInfoField(
              width: halfScreenWidth,
              label: label2,
              value: value2,
              color: Colors.cyan[50],
            ),
          ],
        ),
        Divider(),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("详情页面"),
        centerTitle: true,
      ),
      body: Center(
        child: ListView(
          padding: EdgeInsets.all(8.0),
          children: <Widget>[
            // _showFieldInfo(
            //   "突出颜色",
            //   "highlightColor",
            //   true,
            // ),
            // _showFieldInfo(
            //   "提示颜色",
            //   "hintColor",
            //   true,
            // ),
            _showTwoFieldInfo(
              "突出颜色",
              "highlightColor",
              true,
              "提示颜色",
              "hintColor",
              true,
            ),
            _showEditField(
              "文本选择手柄颜色",
              "textSelectionHandleColor",
              true,
            ),
            _showFieldInfo(
              "文字选择颜色",
              "textSelectionColor",
              false,
            ),
            _showFieldInfo(
              "背景颜色",
              "backgroundColor",
              false,
            ),
            // _showFieldInfo(
            //   "强调颜色",
            //   "accentColor",
            //   false,
            // ),
            // _showFieldInfo(
            //   "画布颜色",
            //   "canvasColor",
            //   false,
            // ),
            // _showFieldInfo(
            //   "卡片颜色",
            //   "cardColor",
            //   true,
            // ),
            // _showFieldInfo(
            //   "按钮颜色",
            //   "buttonColor",
            //   true,
            // ),
            _showTwoFieldInfo(
              "强调颜色",
              "accentColor",
              false,
              "画布颜色",
              "canvasColor",
              false,
            ),
            _showTwoFieldInfo(
              "卡片颜色",
              "cardColor",
              true,
              "按钮颜色",
              "buttonColor",
              true,
            ),
            _showFieldInfo(
              "对话框背景颜色",
              "dialogBackgroundColor",
              true,
            ),
            _showFieldInfo(
              "禁用颜色",
              "disabledColor",
              false,
            ),
            // _showFieldInfo(
            //   "分频器颜色",
            //   "dividerColor",
            //   true,
            // ),
            // _showFieldInfo(
            //   "错误颜色",
            //   "errorColor",
            //   false,
            // ),
            // _showFieldInfo(
            //   "指示灯颜色",
            //   "indicatorColor",
            //   true,
            // ),
            // _showFieldInfo(
            //   "原色",
            //   "primaryColor",
            //   false,
            // ),
            _showTwoFieldInfo(
              "分频器颜色",
              "dividerColor",
              true,
              "错误颜色",
              "errorColor",
              false,
            ),
            _showTwoFieldInfo(
              "指示灯颜色",
              "indicatorColor",
              true,
              "原色",
              "primaryColor",
              false,
            ),
            _showFieldInfo(
              "脚手架背景颜色",
              "scaffoldBackgroundColor",
              false,
            ),
            _showFieldInfo(
              "次标头颜色",
              "secondaryHeaderColor",
              true,
            ),
            _showFieldInfo(
              "选择行颜色",
              "selectedRowColor",
              true,
            ),
            _showFieldInfo(
              "飞溅颜色",
              "splashColor",
              false,
            ),
            _showFieldInfo(
              "未选择的控件颜色",
              "unselectedWidgetColor",
              true,
            ),
          ],
        ),
      ),
    );
  }
}

class ReadInfoField extends StatefulWidget {
  final double width;
  final double height;
  final double padding;
  final String label;
  final String value;
  final Color color;
  ReadInfoField({
    this.width,
    this.height = 25.0,
    this.padding = 5.0,
    this.label,
    this.value,
    this.color = Colors.cyan,
  });

  @override
  _ReadInfoFieldState createState() => _ReadInfoFieldState();
}

class _ReadInfoFieldState extends State<ReadInfoField> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: widget.width,
      height: widget.height,
      decoration: BoxDecoration(color: widget.color),
      child: Row(
        children: <Widget>[
          Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text(widget.label),
                  Text(" : "),
                ],
              ),
            ],
          ),
          Flexible(
            fit: FlexFit.tight,
            child: Container(
              height: widget.height,
              padding: EdgeInsets.all(widget.padding),
              decoration: BoxDecoration(color: Colors.transparent),
              child: Text(
                widget.value,
                textAlign: TextAlign.right,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class EditInfoField extends StatefulWidget {
  final double width;
  final double height;
  final double padding;
  final String label;
  final String value;
  final bool required;
  final Color color;
  EditInfoField({
    this.width,
    this.height = 25.0,
    this.padding = 5.0,
    this.label,
    this.value,
    this.required = false,
    this.color = Colors.cyan,
  });

  @override
  _EditInfoFieldState createState() => _EditInfoFieldState();
}

class _EditInfoFieldState extends State<EditInfoField> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: widget.width,
      height: widget.height,
      decoration: BoxDecoration(color: widget.color),
      child: Row(
        children: <Widget>[
          Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text(widget.label),
                  Text(
                    widget.required ? "*" : " ",
                    style: TextStyle(color: Colors.red),
                  ),
                  Text(" : "),
                ],
              ),
            ],
          ),
          Flexible(
            fit: FlexFit.tight,
            child: Container(
              height: widget.height,
              padding: EdgeInsets.all(widget.padding),
              decoration: BoxDecoration(color: Colors.transparent),
              child: TextField(
                decoration: InputDecoration(
                  hintText: "请输入",
                  hintStyle: TextStyle(fontSize: 12.0),
                  enabled: true,
                  contentPadding: EdgeInsets.all(0.0),
                  border: InputBorder.none,
                ),
                // widget.value,
                textAlign: TextAlign.right,
              ),
            ),
          ),
        ],
      ),
    );
  }
}
